body {
	margin: 0;
	color: #fff;
	background-color: #666;
	font-family: Verdana, sans;
}

#viewport {
	width: 800px;
	height: 480px;
	top: 20px;
	left: 20px;
	position: absolute;
	overflow: hidden;
	border: 3px solid #999;
	z-index: 1200;
}

#bg {
	margin-left: -810px;
	margin-top: -600px;
	width: 1920px;
	height: 1200px;
	background: transparent url('../images/mountains_lake_blurred.jpg') no-repeat
		center center;
	position: absolute;
	z-index: 3;
}

#legend {
	position: absolute;
	bottom: 0;
	font-size: 0.7em;
	padding: 3px;
	color: black;
	background-color: white;
	opacity: 0.5;
	z-index: 99999;
}

#purplebox {
	width: 200px;
	height: 500px;
	top: 50px;
	left: -200px;
	position: absolute;
	background-color: purple;
	z-index: 800;
}

#redbox {
	width: 400px;
	height: 300px;
	top: 150px;
	left: 150px;
	position: absolute;
	background-color: red;
	z-index: 1000;
}

#greenbox {
	width: 200px;
	height: 100px;
	top: 150px;
	left: 150px;
	position: absolute;
	background-color: green;
	z-index: 500;
}

#bluebox {
	width: 150px;
	height: 150px;
	top: -150px;
	left: -150px;
	position: absolute;
	background-color: blue;
	z-index: 200;
}

#greybox {
	width: 250px;
	height: 50px;
	top: 200px;
	left: 50px;
	position: absolute;
	background-color: #aaa;
	z-index: 1050;
}

.thickness {
	position: absolute;
	background-color: #666;
}